<section id="contract-flow-change">
	<page-tab :data="tabData" @on-item-click="handleTabClick" prefix="我的流程"></page-tab>

	<div class="ml-24 mr-24 pt-10 relative" v-if="selectTabData == '合同变更信息'">

		<div class="absolute cursor" style="right: 0;top: 24px;color: rgba(86, 94, 153, 1);" @click="versionevent">
			<span class="icon-Gm-version"></span>
			<span>版本比对</span>
		</div>

		<div class="mt-15">
			<h3 class="font-14 color-gray">基本信息</h3>
			<div class="dy-flex line-height-34">
				<div class="dy-fx-2">
					<span class="color-999">变更单号：</span>
					<span>{{data.alterInfoVO.alterNo}}</span>
				</div>
				<div class="dy-fx-3">
					<span class="color-999">合同管理编号：</span>
					<a>{{data.alterInfoVO.mCode | formatUndefined}}</a>
				</div>
			</div>
			<div class="dy-flex line-height-34">
				<div class="dy-fx-2">
					<span class="color-999">变更内容：</span>
					<span>{{ data.alterInfoVO.alterType | formAlterType }}</span>
				</div>
				<div class="dy-fx-3">
					<span class="color-999">变更生效日：</span>
					<span>{{data.alterInfoVO.effectiveDate | formatDate}}</span>
				</div>
			</div>
			<div class="line-height-34 dy-flex" v-if="alertFile.length">
				<span class="color-999">补充协议：</span>
				<div class="dy-flex" style="flex-direction: column;">
					<div v-for="item in alertFile"><a :href="item.url">{{item.name}}</a></div>
				</div>
			</div>
			<div class="line-height-34">
				<span class="color-999">变更说明：</span>
				<span>{{data.alterInfoVO.alertDescription | formatUndefined}}</span>
			</div>

		</div>

		<div class="mt-15 pt-15 border-t">
			<h3 class="font-14 color-gray">合同信息</h3>
			<div class="dy-flex line-height-34">
				<div class="dy-fx-1">
					<span class="color-999">合同编号：</span>
					<span>{{data.cCode | formatUndefined}}</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">合同名称：</span>
					<span>{{data.name | formatUndefined}}</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">签订时间：</span>
					<span>{{data.signTime | formatDate}}</span>
				</div>
			</div>
			<div class="line-height-34">
				<span class="color-999">备注：</span>
				<span>{{data.memo | formatUndefined}}</span>
			</div>
		</div>


		<div class="mt-15 pb-10 pt-15 border-t hl-global-detail-box">
			<h3 class="font-14 color-gray">乙方</h3>

			<div class="hl-row">
				<div class="hl-row-item" style="width: 100%;">
					<div class="title">客户名称：</div>
					<div class="item">{{data.zlfCompany}}</div>
				</div>
			</div>
			<div class="hl-row">
				<div class="hl-row-item">
					<div class="title">客户类型：</div>
					<div class="item">{{data.zlfType | formatZlfType}}</div>
				</div>
				<div class="hl-row-item">
					<div class="title">所属行业：</div>
					<div class="item">{{data.zlfIndustryTypeVal}}</div>
				</div>
			</div>
			<div class="hl-row">
				<div class="hl-row-item">
					<div class="title">纳税人识别号：</div>
					<div class="item">{{data.idcode | formatUndefined}}</div>
				</div>
				<div class="hl-row-item">
					<div class="title">公司邮箱：</div>
					<div class="item">{{data.email | formatUndefined}}</div>
				</div>
			</div>
			<div class="hl-row">
				<div class="hl-row-item">
					<div class="title">法人：</div>
					<div class="item">{{data.zlfLperson | formatUndefined}}</div>
				</div>
				<div class="hl-row-item">
					<div class="title">联系电话：</div>
					<div class="item">{{data.zlfLphone | formatUndefined}}</div>
				</div>
			</div>
			<div class="hl-row">
				<div class="hl-row-item">
					<div class="title">联系人：</div>
					<div class="item">{{data.zlfSperson | formatUndefined}}</div>
				</div>
				<div class="hl-row-item">
					<div class="title">联系电话：</div>
					<div class="item">{{data.zlfSphone | formatUndefined}}</div>
				</div>
			</div>
			<div class="hl-row">
				<div class="hl-row-item" style="width: 100%;">
					<div class="title">联系地址：</div>
					<div class="item">{{data.zlfAddress | formatUndefined}}</div>
				</div>
			</div>
		</div>

		<!-- 自定义 -->
		<div class="mt-15">
			<hl-custom-fileds type="CONTRACT" mode="detail" :data="tmpData"></hl-custom-fileds>
		</div>

		<!-- 出租资源 -->
		<div class="pt-15">
			<h3 class="font-14 color-gray">出租资源</h3>
			<!-- 单元 -->
			<div v-if="building.length">
				<div class="hl-34 mr-10 color-333">单元({{totalArea | formatNum}}m²)</div>
				<div class="unit-table border">
					<div class="tb-title dy-flex border-b gradient-color">
						<div class="dy-fx-2">项目</div>
						<div class="dy-fx-2">楼栋</div>
						<div class="dy-fx-1">楼层</div>
						<div class="dy-fx-4">单元</div>
					</div>
					<div class="tb-content">
						<ul class="dy-flex project-cr">
							<li class="dy-fx-2 project">{{data.projectName}}</li>
							<li class="dy-fx-7">
								<ul class="dy-flex building-cr" v-for="(item,index) in building">
									<li class="dy-fx-2 building">{{item.buildingName}}</li>
									<li class="dy-fx-5">
										<ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
											<li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
											<li class="dy-fx-4 unit">
												<b v-for="(item2,index2) in item1.unit" class="clearfix" style="float:left"
													@click="getUnitDetails(item1.unitId[index2])">
													<a href="javascript:;">{{item2}}</a>
													<i v-if="index2 + 1 !== item1.unit.length">、</i>
												</b>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 工位 -->
			<div v-if="wp.length">
				<div class="hl-34 mr-10 color-333" v-if="wp.length">工位({{wpTotalNum}}个)</div>
				<div class="position-table border" v-if="wp.length">
					<div class="tb-title dy-flex border-b gradient-color">
						<div class="dy-fx-3">项目</div>
						<div class="dy-fx-3">楼栋</div>
						<div class="dy-fx-1">楼层</div>
						<div class="dy-fx-1">单元</div>
						<div class="dy-fx-1">工位数</div>
						<div class="position-item">工位</div>
					</div>
					<ul class="tb-content">
						<li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
							:floorId="item.floorId" :unitId="item.unitId">
							<div class="dy-fx-3">{{data.projectName}}</div>
							<div class="dy-fx-3">{{item.buildingName}}</div>
							<div class="dy-fx-1">{{item.floorName || '--'}}</div>
							<div class="dy-fx-1">{{item.unitName}}</div>
							<div class="dy-fx-1">{{item.num}}</div>
							<div class="position-item">
								<span class="position">
									<b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
											v-if="index1 + 1 !== item.positions.length">、</i></b>
								</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 车位 -->
			<div v-if="st.length">
				<div class="hl-34 mr-10 color-333" v-if="st.length">车位({{stTotalNum}}个)</div>
				<div class="position-table border" v-if="st.length">
					<div class="tb-title dy-flex border-b gradient-color">
						<div class="dy-fx-3">项目</div>
						<div class="dy-fx-3">楼栋</div>
						<div class="dy-fx-1">楼层</div>
						<div class="dy-fx-1">单元</div>
						<div class="dy-fx-1">车位数</div>
						<div class="position-item">车位</div>
					</div>
					<ul class="tb-content">
						<li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
							:floorId="item.floorId" :unitId="item.unitId">
							<div class="dy-fx-3">{{data.projectName}}</div>
							<div class="dy-fx-3">{{item.buildingName}}</div>
							<div class="dy-fx-1">{{item.floorName || '--'}}</div>
							<div class="dy-fx-1">{{item.unitName}}</div>
							<div class="dy-fx-1">{{item.num}}</div>
							<div class="position-item">
								<span class="position">
									<b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
											v-if="index1 + 1 !== item.positions.length">、</i></b>
								</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 租金押金 -->
		<div class="mt-15">
			<h3 class="font-14 color-gray">租金押金</h3>
			<div class="dy-flex line-height-34">
				<div class="dy-fx-1">
					<span class="color-999">租金单价：</span>
					<span>{{ data.rentPrice | formatNum }}元/m²/月</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">日租金：</span>
					<span>{{ data.rentPriceDay | formatNum }}元/天</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">月租金：</span>
					<span>{{ data.rentPriceMonth | formatNum }}元/月</span>
				</div>
			</div>
			<div class="dy-flex line-height-34">
				<div class="dy-fx-1">
					<span class="color-999">有效租金：</span>
					<span>{{ (data.effectiveRentDay || effectiveRD) | formatNum }}元/m²/天</span>
				</div>
			</div>
			<div class="dy-flex warmText line-height-34">
				<div class="dy-fx-1"></div>
				<div class="dy-fx-1">{{dayRentPriceAlert}}</div>
				<div class="dy-fx-1">{{monthRentPriceAlert}}</div>
			</div>
			<div class="dy-flex line-height-34">
				<div class="dy-fx-1">
					<span class="color-999">押付方式：</span>
					<span>押{{ data.depositPeriod }} 付{{ data.paymentPeriod }}</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">租金／押金滞纳金比例：</span>
					<span>{{ data.rentLateFeePercent | formatNum }}%</span>
				</div>
				<div class="dy-fx-1">

				</div>
			</div>
			<!-- 折扣月租金 -->
			<div class="dy-flex line-height-34" v-if="data.rentDiscountRate">
				<div class="dy-fx-1">
					<span class="color-999">折扣率：</span>
					<span>{{data.rentDiscountRate*100 | formatNum}}%</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">折后日租金：</span>
					<span>{{data.rentDiscountPriceDay | formatNum}}元/天</span>
				</div>
				<div class="dy-fx-1">
					<span class="color-999">折后月租金：</span>
					<span>{{data.rentDiscountPriceMonth | formatNum}}元/月</span>
				</div>
			</div>
		</div>
		<!-- 押金 -->
		<div class="pb-10 mt-15" v-if="dototal > 0">
			<h3 class="font-14 color-gray">押金</h3>
			<div class="row">
				<div class="col-md-2 title" style="width: 120px">押金总金额：</div>
				<div class="col-md-2 item" style="margin-right:30px">{{yaTotal}}元</div>
			</div>
			<div class="position-table border">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-1">费用名</div>
					<div class="dy-fx-1">单价</div>
					<div class="dy-fx-1">押几{{data.rentWay == 'D'?'天':'月'}}</div>
					<div class="dy-fx-1">总金额</div>
					<div class="dy-fx-1">滞纳金比例</div>
				</div>
				<ul class="tb-content border-b line-height-40">
					<li class="content-item dy-flex" v-for="(item,index) in data.expenses"
						v-if="item.expenseType == 'D' && (item.depositType == 'DR' || !item.depositType)">
						<div class="dy-fx-1">租金押金</div>
						<div class="dy-fx-1">--</div>
						<div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
						<div class="dy-fx-1">{{item.amount | formatNum}}</div>
						<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
					</li>
				</ul>
				<ul class="tb-content line-height-40">
					<li class="content-item dy-flex" v-for="(item,index) in data.expenses"
						v-if="item.expenseType == 'D' && item.depositType == 'DO'">
						<div class="dy-fx-1">{{item.expenseName}}</div>
						<div class="dy-fx-1">{{item.price | formatNum}}（元/平米/月）</div>
						<div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
						<div class="dy-fx-1">{{item.amount | formatNum}}</div>
						<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 阶梯租金 -->
		<div v-if="rent.length" class="mt-15">
			<h3 class="font-14 color-gray">阶梯租金</h3>
			<p style="margin-bottom: 5px;"><span class="color-999">递增方式：</span>
				<span>{{contract.rentIncreaseWayValue ? contract.rentIncreaseWayValue : '下账期递增'}}</span></p>
			<div class="table border text-center">
				<div class="tb-title dy-flex border-b gradient-color line-height-40">
					<div class="dy-fx-2">阶梯开始时间</div>
					<div class="dy-fx-1">递增率</div>
					<div class="dy-fx-2">租金单价({{contract.rentPriceUnit == 'D'? '元/平米/天':'元/平米/月'}})</div>
					<div class="dy-fx-2">日租金(元/天)</div>
					<div class="dy-fx-2">月租金(元/月)</div>
					<div class="dy-fx-1" v-if="contract.rentDiscountRate">折扣率</div>
					<div class="dy-fx-2" v-if="contract.rentDiscountRate">折后日租金(元/天)</div>
					<div class="dy-fx-2" v-if="contract.rentDiscountRate">折后月租金(元/月)</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex border-b" v-for="(item,index) in rent">
						<div class="dy-fx-2 border-r">{{item.beginDate}}</div>
						<div class="dy-fx-1 border-r">{{Number(item.percent).toFixed(2)}}%</div>
						<div class="dy-fx-2 border-r">{{item.price | formatNum}}</div>
						<div class="dy-fx-2 border-r">{{item.dayPrice | formatNum}}</div>
						<div class="dy-fx-2 border-r">{{item.monthPrice | formatNum}}</div>
						<div class="dy-fx-1 border-r" v-if="contract.rentDiscountRate">{{(item.discount*100) | formatNum}}%</div>
						<div class="dy-fx-2 border-r" v-if="contract.rentDiscountRate">{{item.discountD | formatNum}}</div>
						<div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountM | formatNum}}</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 营业额抽成 -->
		<div v-if="data.commissionRules.length" class="mt-15">
			<h3 class="font-14 color-gray">营业额抽成</h3>
			<p class="line-height-34">抽成方式: <span class="ml-10">{{ data.commissionTypeVal }}</span> <span
					style="font-weight: normal;color: #E98667;font-size: 12px"
					v-if="data.compareRentAmtFlag == 'Y'">(租金与抽成取其高)</span></p>
			<div class="table border text-center">
				<div class="tb-title dy-flex gradient-color line-height-40">
					<div class="dy-flex border-b dy-fx-8">
						<div class="dy-fx-1" style="font-weight: normal;">基数下限（＞元）</div>
						<div class="dy-fx-1" style="font-weight: normal;">基数上限（≤元）</div>
						<div class="dy-fx-1" style="font-weight: normal;">抽成比例（%）</div>
						<div class="dy-fx-1" style="font-weight: normal;">抽成下限（元）</div>
						<div class="dy-fx-1" style="font-weight: normal;">抽成上限（元）</div>
						<div class="dy-fx-1" style="font-weight: normal;">滞纳金比例（%）</div>
						<div style="width:150px">付款日期</div>
					</div>
					<div class="dy-fx-1 text-center" style="font-weight: normal;">付款周期（月）</div>
				</div>
				<div class="dy-flex">
					<ul class="tb-content dy-fx-8">
						<li class="content-item dy-flex border-b" v-for="(item,index) in data.commissionRules">
							<div class="dy-fx-1 border-r">{{ item.baseValDownLimit }}</div>
							<div class="dy-fx-1 border-r">
								<span v-if="index < data.commissionRules.length-1">{{ item.baseValUpLimit }}</span>
								<span v-if="index == data.commissionRules.length-1">不限</span>
							</div>
							<div class="dy-fx-1 border-r">{{ item.commissonPercent}}</div>
							<div class="dy-fx-1 border-r">{{ item.commissionDownLimit || '--' }}</div>
							<div class="dy-fx-1 border-r">{{ item.commissionUpLimit || '--' }}</div>
							<div class="dy-fx-1 border-r">{{ item.lateFeePercent || '--' }}</div>
							<div style="width:150px">
								{{data.commissionDateBoa ? (data.commissionDateBoa == 'B' ? '账单开始前' : '账单开始后') : '账单开始前'}}{{data.commissionDateFixNum | formatUndefined}}{{data.commissionDateFixType ? (data.commissionDateFixType == 'TS' ? '个自然日' : '号') : '个自然日'}}
							</div>
						</li>
					</ul>
					<div class="dy-fx-1 text-center border-l"
						:style="{height: data.commissionRules.length*40 + 'px', lineHeight: data.commissionRules.length*40 + 'px'}">
						{{ data.commissionPaymentPeriod }}</div>
				</div>
			</div>
		</div>

		<!-- 免租期 -->
		<div v-if="freeDate.length" class="mt-15">
			<h3 class="font-14 color-gray">免租期/装修期</h3>
			<div class="table border text-center">
				<div class="tb-title dy-flex border-b gradient-color line-height-40">
					<div class="dy-fx-2">序号</div>
					<div class="dy-fx-4">免租/装修开始时间</div>
					<div class="dy-fx-4">免租/装修结束时间</div>
					<div class="dy-fx-2">账单去除</div>
					<div class="dy-fx-2">备注</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex border-b" v-for="(item,index) in freeDate" >
						<div class="dy-fx-2 border-r">{{index+1}}</div>
						<div class="dy-fx-4 border-r">{{item.freeBeginDate | formatDate}}</div>
						<div class="dy-fx-4 border-r">{{item.freeEndDate | formatDate}}</div>
						<div class="dy-fx-2 border-r">{{item.billHiddenFlag == 'Y'?'是':'否' }}</div>
						<div class="dy-fx-2 ">{{item.freeMemo || '--' }}</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 周期性费项 -->
		<div v-if="pExpense.length" class="pt-10 mt-10">
			<h3 class="font-14 color-gray">周期性费项</h3>
			<div class="border line-height-40 text-center">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-2">费用名</div>
					<div class="dy-fx-2">单价</div>
					<div class="dy-fx-1">日金额(元/天)</div>
					<div class="dy-fx-1">月金额(元/月)</div>
					<div class="dy-fx-1">付款周期</div>
					<div class="dy-fx-1">滞纳金比例</div>
					<div class="dy-fx-2">计费时间</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex border-b" v-for="(item,index) in pExpense">
						<div class="dy-fx-2 border-r">{{item.expenseName}}</div>
						<div class="dy-fx-2 border-r dy-flex" style="justify-content: space-between;"><span
								class="pl-5">{{item.price | formatNum}}</span> <span class="pr-5">{{ item.unitsVal }}</span></div>
						<div class="dy-fx-1 border-r">{{item.priceDay | formatNum}}</div>
						<div class="dy-fx-1 border-r">{{item.priceMonth | formatNum}}</div>
						<div class="dy-fx-1 border-r">{{item.expensePeriod}}</div>
						<div class="dy-fx-1 border-r">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
						<div class="dy-fx-2">
							<div v-if="item.customPeriod.length">
								<p v-for="item1 in item.customPeriod">{{item1.beginDate | formatDate}} 至
									{{item1.endDate | formatDate}}</p>
							</div>
							<div v-else>同租赁周期</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 一次性费项 -->
		<div v-if="oExpense.length" class="pt-10 mt-10">
			<h3 class="font-14 color-gray">一次性费项</h3>
			<div class="border line-height-40 text-center">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-1">费用名</div>
					<div class="dy-fx-1">单价(元/平米/天)</div>
					<div class="dy-fx-1">总金额</div>
					<div class="dy-fx-1">滞纳金比例</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex border-b" v-for="(item,index) in oExpense" >
						<div class="dy-fx-1 border-r">{{item.expenseName}}</div>
						<div class="dy-fx-1 border-r">{{item.price | formatNum}}</div>
						<div class="dy-fx-1 border-r">{{item.amount | formatNum}}</div>
						<div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 临时性费项 -->
		<div v-if="tExpense.length" class="pt-10 mt-10">
			<h3 class="font-14 color-gray">临时费项</h3>
			<div class="border line-height-40 text-center">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-1">费用名</div>
					<div class="dy-fx-3">金额</div>
					<div class="dy-fx-3">税率(%)</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex border-b" v-for="(item,index) in tExpense">
						<div class="dy-fx-1 border-r">{{item.expenseName}}</div>
						<div class="dy-fx-3 border-r">{{item.amount | formatNum}}</div>
						<div class="dy-fx-3">{{item.taxPercent*100 || '--'}}</div>
					</li>
				</ul>
			</div>
		</div>

		<!--变更生效日-->
		<div class="mt-15" v-if="oldPayData.length">
			<hl-pay-plan ref="payData" :data="oldPayData" :is-edit="false" :sub-display="false" :total-display="false">
				<div slot="title" class="planBillTitle">变更生效日({{ data.alterInfoVO.effectiveDate | formatDate }})起新付款计划</div>
				<!-- <hl-button @on-click="exportBill">导出</hl-button> -->
			</hl-pay-plan>
		</div>

		<!--往期-->
		<div class="mt-15" v-if="payData.length">
			<hl-pay-plan title="" :data="payData" :is-edit="false" :sub-display="false" :total-display="false">
				<div slot="title" class="planBillTitle">往期已执行付款计划</div>
			</hl-pay-plan>
		</div>

		<div class="pay-subtotal mt-15" v-show="newData.length">
			<h3 class="font-16">小计：</h3>
			<div class="pay-subtotal-container" ref="paySubtotalScroll">
				<vue-scroll :ops="ops1" ref="scrollSubtotal" @handle-scroll="handleScroll">
					<div class="pay-subtotal-table clearfix">
						<div class="pay-subtotal-table-td" style="width: 140px;">
							<div>费用</div>
							<div class="border-t">金额（元）</div>
						</div>
						<div class="pay-subtotal-table-td clearfix"
							:style="{width: subtotalTableWidth * subtotalArr[item + 'len'] + 'px'}" v-for="(item, index) in types"
							v-if="item != 'CM' && subtotalArr[item + 'len']">
							<div class="pull-left" :style="{width: subtotalTableWidth-1 + 'px'}"
								v-for="(item0, index0) in subtotalArr[item]">
								<div :class="{'border-r': index0 < subtotalArr[item].length-1}">{{ item0.name }}</div>
								<div :class="{'border-r': index0 < subtotalArr[item].length-1}" class="border-t">
									{{ item0.expense | formatNum }}</div>
							</div>
						</div>
						<div class="pay-subtotal-table-td" :style="{width: subtotalTableWidth + 'px'}" v-if="subtotalArr['Olen']">
							<div>{{ oObj.name }}</div>
							<div class="border-t">{{ oObj.expense | formatNum }}</div>
						</div>
						<div class="pay-subtotal-table-td" :style="{width: subtotalTableWidth + 'px'}" v-if="subtotalArr['CMlen']">
							<div>营业额抽成</div>
							<div class="border-t">实计</div>
						</div>
						<div class="pay-subtotal-table-td" :style="{width: subtotalTableWidth + 'px'}" v-if="intentionAmount">
							<div>意向金抵扣</div>
							<div class="border-t">{{ intentionAmount | formatNum }}</div>
						</div>
					</div>
				</vue-scroll>
			</div>
		</div>
		<div class="pay-plan-total" v-show="newData.length">
			<strong>合计应付：</strong>
			<span class="pay-plan-total-rmb">{{ total | formatNum }}</span>
			<span>元</span>
			<span class="pay-plan-red" v-if="subtotalArr['CMlen']">(营业额抽成或与租金取高以实计)</span>
		</div>

		<div class="mt-15 pt-10">
			<div class="ptb-10">
				<!--合同审核页面、待审核状态下显示审核按钮-->
				<hl-button type="primary" @on-click="passAudit"
					v-if="data.alterInfoVO.status == 'WBP' || data.alterInfoVO.status == 'WCP'">审核通过</hl-button>
				<hl-button type="outline" @on-click="notPassAudit"
					v-if="data.alterInfoVO.status == 'WBP' || data.alterInfoVO.status == 'WCP'">审核不通过</hl-button>
			</div>
		</div>

	</div>

	<div class="ml-24 mr-24" v-if="selectTabData == '账单变更信息'">

		<div class="mt-15 pt-10 text-center" v-if="!billChangeData.conflictBills.length">暂无变更信息</div>
		<div v-if="billChangeData.conflictBills.length">
			<div class="mt-15 pt-10 color-orange">此次变更生效日（{{ data.alterInfoVO.effectiveDate | formatDate }}）影响了以下账单，处理完成后全部作废
			</div>
			<div class="unit-table tablebo">
			<div class="tb-content-plus">
				<div class="tb-title dy-flex border-b gradient-color tableheader">
					<div class="dy-fx-1">账单编号</div>
					<div class="dy-fx-3">变更前</div>
					<div class="dy-fx-3">变更后</div>
				</div>
				<ul class="dy-flex border-b" v-for="item in billChangeData.conflictBills">
					<li class="dy-fx-1 border-r" style="align-items: center;justify-content: center;" v-if="item.expenses.length>0">
						{{item.billNo}}
					</li>
					<li class="dy-fx-3 border-r rentClass" v-if="item.expenses.length>0">
						<section v-for="(single,one) in item.expenses" v-if="single.amount">
							<div v-if="!one">
								<div>
									<p class="table-gray-title">账单周期</p>
								</div>
								<span>{{item.beginDate | formatDate}}至{{item.endDate | formatDate}}</span>
							</div>
							<div class="dy-flex" style="flex-direction: column;">
								<div>
									<p class="table-gray-title mt-10">{{single.expenseName}}</p>
								</div>
								<span>应收金额：{{single.amount.amountReceive || '--'}}元</span>
								<span>已收金额：{{single.amount.amountPayed || '--'}}元</span>
								<span>减免金额：{{single.amount.derateExpense || '--'}}元</span>
								<span>结转金额：{{single.amount.carryOverAmount || '--'}}元</span>
							</div>
						</section>
						<section v-if="!item.expenses[0].amount" class="invalidCalss">作废</section>
					</li>
					<li class="dy-fx-3 rentClass" v-if="item.expenses.length>0">
						<section v-for="(single,one) in item.expenses" v-if="single.withdrawAmount">
							<div v-if="!one">
								<div>
									<p class="table-gray-title">账单周期</p>
								</div>
								<span
									class="color-orange">{{item.withdrawBeginDate | formatDate}}至{{item.withdrawEndDate | formatDate}}</span>
							</div>
							<div v-if="single.withdrawAmount" class="dy-flex" style="flex-direction: column;">
								<div>
									<p class="table-gray-title mt-10">{{single.expenseName}}</p>
								</div>
								<span>应收金额：{{single.withdrawAmount.amountReceive || '--'}}元</span>
								<span>已收金额：{{single.withdrawAmount.amountPayed || '--'}}元<span
										style="color:#ec4151"
										v-if="moneyCha > 0">（应退：{{moneyCha}}元）</span></span>
								<span>减免金额：{{single.withdrawAmount.derateExpense || '--'}}元</span>
								<span>结转金额：{{single.withdrawAmount.carryOverAmount || '--'}}元</span>
							</div>
						</section>
						<section v-if="!item.expenses[0].withdrawAmount" class="invalidCalss">作废</section>
					</li>
				</ul>
			</div>
		</div>
		<div class="mt-15 pt-15">
			<dl class="mt-15">
				<dt class="color-gray">费用合计</dt>
				<dd class="line-height-34">
					<span class="color-999">总计金额：</span>
					<span class="color-666">{{ moneyCha >= 0 ?  moneyCha : -moneyCha}}元
						（{{ 0 > moneyCha  ? '应付' : '应退' }}）</span>
				</dd>
			</dl>
		</div>

		</div>

	</div>

	<section v-if="selectTabData == '流程信息'" class="contract-container ml-24 mr-24">
		<div class="border-b pb-10 line-height-34">
			<h4 class="block-title">流程信息</h4>
			<div class="row">
				<div class="col-md-2 liuceng-title color-999">流程编号：</div>
				<div class="col-md-9 item">{{bpm.bpmNo}}</div>
			</div>
			<div class="row">
				<div class="col-md-2 liuceng-title color-999">耗时：</div>
				<div class="col-md-9 item">{{calculateTimeDifference(bpm.startTime,bpm.endTime)}}</div>
			</div>
			<div class="row">
				<div class="col-md-2 liuceng-title color-999">发起人：</div>
				<div class="col-md-9 item">{{bpm.starterName | formatUndefined}}</div>
			</div>
			<div class="row">
				<div class="col-md-2 liuceng-title color-999">发起时间：</div>
				<div class="col-md-3 item">{{bpm.startTime | formatDetailDate}}</div>
			</div>
			<div class="row" v-if="bpm.userName">
				<div class="col-md-2 liuceng-title color-999">当前处理人：</div>
				<div class="col-md-9 line-height-34 pl-0">{{bpm.userName | formatUndefined}}</div>
			</div>
			<div class="row" v-if="bpm.currPhase">
				<div class="col-md-2 liuceng-title color-999">当前处理节点：</div>
				<div class="col-md-9 item">{{bpm.currPhase}}</div>
			</div>
			<div class="row">
				<div class="col-md-2 liuceng-title color-999">流程版本号：</div>
				<div class="col-md-9 item">{{bpm.version}}</div>
			</div>
		</div>

		<div class="pb-10 border-b">
			<h4 class="block-title">流程图</h4>
			<div class="business-liuceng-image-cr">
				<div class="content">
					<div class="flowlist-image">
						<div class="begin-circle">开始</div>
						<div class="middle-node-container relative">
							<ul class="middle-node-wrapper clearfix">
								<li class="node-item" v-for="(item,index) in flowNode">
									<div class="node-order">
										<span>{{index + 1}}</span>
									</div>
									<div class="node-name">{{item.name}}</div>
									<p class="person" v-if="item.userNames.length">{{item.userNames.join('/')}}</p>
								</li>
							</ul>
						</div>
						<div class="end-circle">结束</div>
					</div>
				</div>
			</div>
		</div>

		<div class="pb-10" v-if="bpmList.length">
			<h4 class="block-title">处理历史</h4>
			<div class="deal-history-table box-i-shadow-1 br-4">
				<div class="table-title">
					<div class="table-item1">时间</div>
					<div class="table-item2">处理人</div>
					<div class="table-item3">操作说明</div>
					<div class="table-item4">信息</div>
				</div>
				<ul class="table-content" v-for="item in bpmList">
					<li class="table-item1">{{item.endTime | formatDetailDate}}</li>
					<li class="table-item2">{{item.fnUserName | formatUndefined}}</li>
					<li class="table-item3">{{item.taskName | formatUndefined}}</li>
					<li class="table-item4">{{item.memo | formatUndefined}}</li>
				</ul>
			</div>
		</div>
	</section>



	<hl-dialog title="版本比对" :visible="versionDisplay" :height="560" :width="900" @on-close="versionevent">
		<div class="border br-4">
			<div class="dy-flex bg-fff text-center line-height-40 color-gray">
				<div class="dy-fx-1 border-r">变更项</div>
				<div class="dy-fx-3 border-r">变更前</div>
				<div class="dy-fx-3">变更后</div>
			</div>
			<div class="dy-flex bg-fff border-t" v-for="item in groupLogs" v-if="publicGroup.indexOf(item.group) > -1">
				<div class="dy-fx-1 border-r dy-flex" style="justify-content: center;align-items: center;">
					{{ item.operationName }}</div>
				<!-- start -->
				<div class="dy-fx-6">

					<div class="dy-flex" v-for="log in item.logRecords">
						<div class="dy-fx-1 border-r">
							<div v-for="row in log.rowData">
								<div class="table-gray-title" v-if="row.logType == 'textline' && publicFlag.indexOf(row.isUpdate) > -1">
									{{ row.content }}</div>
								<div v-if="row.logType == 'add'" class="pl-12 pr-12 ptb-10">--</div>
								<div class="pl-12 pr-12 ptb-10 color-999" style="line-height: 28px;"
									v-if="publicLogsTypes.indexOf(row.logType) > -1">{{ row.key ? row.key + ':' : '' }}
									{{ row.before ? row.before : row.content }}</div>
							</div>
						</div>
						<div class="dy-fx-1">
							<div v-for="row in log.rowData">
								<div class="table-gray-title" v-if="row.logType == 'textline' && publicFlag.indexOf(row.isUpdate) > -1">
									{{ row.content }}</div>
								<div v-if="row.logType == 'add'" class="pl-12 pr-12 ptb-10 color-orange">
									{{ row.key ? row.key + ':' : '' }} {{ row.after ? row.after : row.content }}</div>
								<div :class="{'color-orange': row.logType == 'change', 'color-delete': row.logType == 'delete'}"
									class="pl-12 pr-12 ptb-10 color-999" style="line-height: 28px;"
									v-if="publicLogsTypes.indexOf(row.logType) > -1">{{ row.key ? row.key + ':' : '' }}
									{{ row.after ? row.after : row.content }}</div>
							</div>
						</div>
					</div>

				</div>
				<!-- end -->
			</div>
		</div>
		<div class="flow--footer" slot="footer">
			<a @click="cutChangeFlow">{{!cutChangeFlowFlag ? '只显示变更信息' : '显示全部' }}</a>
		</div>
	</hl-dialog>

	<!-- 单元详情 -->
	<unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
</section>

<div class="upload-filess"></div>

<style type="text/css">
	.tb-title>div {
		color: #a5aab7;
	}

	.content-item>div {
		color: #333;
	}

	.warmText {
		color: #ec4151;
		font-size: 12px;
	}

	.planBillTitle {
		color: #666;
		background: rgba(236, 129, 81, .3);
		padding: 4px 8px;
		border-radius: 2px;
	}

	h3 {
		margin: 0 0 10px;
	}

	.table-gray-title {
		line-height: 30px;
		padding: 0 15px;
		background: rgba(240, 240, 240, 1);
		border-radius: 2px;
		display: inline-block;
		margin-left: 12px;
		margin-top: 10px;
	}

	.color-delete {
		text-decoration: line-through;
		color: #ea723d;
	}

	#contract-flow-change .table .content-item>div {
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 40px;
	}

	#contract-flow-change .table .content-item>div div {
		height: auto;
		line-height: 32px;
	}

	#contract-flow-change .block-title {
		font-weight: 500;
		font-size: 14px;
		color: #929BA8;
		height: 40px;
		line-height: 40px;
	}

	#contract-flow-change .hl-dialog__footer {
		background: #F9F9F9;
	}

	#contract-flow-change .table .content-item>div {
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 40px;
	}

	#contract-flow-change .table .content-item>div div {
		height: auto;
		line-height: 32px;
	}

	#contract-flow-change .block-title {
		font-weight: 500;
		font-size: 14px;
		color: #929BA8;
		height: 40px;
		line-height: 40px;
	}

	.templateList {
		width: 780px;
		background: #fff;
		box-shadow: 0px 0px 6px 0px rgba(136, 136, 136, 0.75);
		border-radius: 6px;
	}

	.templateList_title {
		height: 46px;
		text-align: center;
		line-height: 46px;
	}

	.templateList_content {
		background: #F9F9F9;
		padding: 24px 0px 77px 16px;
	}

	.TC_header {
		color: #666;
		font-size: 14px;
		padding-bottom: 20px;
		border-bottom: 1px solid #E8E8E8;
		padding-right: 20px;
		margin-bottom: 18px;
	}

	.TC_header>div {
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	.TC_header>ul {
		display: flex;
		align-items: center;
	}

	.TC_header>ul>li {
		display: flex;
		align-items: center;
		margin-right: 50px;
	}

	.TC_mask {
		display: none;
		position: absolute;
		z-index: 9;
		width: 140px;
		height: 36px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 4px;
		/* text-align: center; */
		text-indent: 47px;
		line-height: 36px;
		color: #fff;
		cursor: pointer;
	}

	.check-auth {
		display: inline-block;
		width: 13px;
		height: 13px;
		position: relative;
		border: 1px solid #666;
		border-radius: 4px;
		margin-right: 10px;
	}

	.check-auth-active {
		display: inline-block;
		background-image: url(assets/images/Check.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 8px;
		background-color: #44B548;
		width: 13px;
		height: 13px;
		border: 1px solid #44B548;
		border-radius: 4px;
		margin-right: 10px;
	}
	.tb-content-plus li {
        min-height: 40px;
        display: flex;
        padding: 10px;
    }

	.check-item {
		display: inline-block;
		width: 16px;
		height: 16px;
		position: absolute;
		z-index: 99;
		background: #fff;
		border-radius: 8px;
		right: 10px;
		top: 9px;
	}

	.check-item-active {
		display: inline-block;
		background-image: url(assets/images/Check.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 8px;
		background-color: #5e67a5;
		width: 13px;
		height: 13px;
		border: 1px solid #5e67a5;
		border-radius: 4px;
		margin-right: 10px;
	}

	.tem-item {
		width: 140px;
		height: 36px;
		background: #44B548;
		box-shadow: 1px 1px 2px 0px rgba(163, 184, 198, 0.5);
		border-radius: 4px;
		margin: 0 10px 10px 0;
		overflow: hidden;
		position: relative;
		line-height: 36px;
		text-indent: 10px;
		color: #fff;
		padding-right: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.tem-item:hover .TC_mask {
		display: block
	}

	.tem-item:hover .TC_text {
		-webkit-filter: blur(3px);
	}

	.tem-item-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.TC_selected_active {
		color: #44B548
	}

	.TC_selected_icon {
		position: absolute;
		z-index: 9999;
		right: 12px;
		top: 12px;
		font-size: 12px;
	}

	.templateList_footer {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 56px;
	}

	.TC_close_icon {
		float: right;
		margin: 15px 20px 0 0;
	}

	.loadprogress {
		position: fixed;
		z-index: 999999;
		left: 0;
		bottom: 0;
		height: 20px;
		width: 500px;
		font-size: 12px;
		text-indent: 3px;
		line-height: 20px;
	}

	#contract-flow-change .fw-normal div {
		font-weight: normal !important;
	}

	.ZDY_item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.ZDY_title {
		font-size: 14px;
		color: #999;
	}

	.ZDY_content {
		flex: 1;
		padding-right: 10px;
	}
	.rentClass {
        flex-direction: column;
        align-items: flex-start;
    }

    .rentClass>div {
        display: flex;
        flex-direction: column;
    }

    .rentClass>div div {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 14px;
    }

    .rentClass>div span {
        margin-bottom: 10px;
    }

    .invalidCalss {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
    }

    .table-gray-title {
        line-height: 30px;
        padding: 0 15px;
        background: rgba(240, 240, 240, 1);
        border-radius: 2px;
        display: inline-block;
        margin-bottom: 10px;
    }
    .textCss{
        display: inline-block;
        margin-bottom: 10px;
        color: #666;
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 30px;
        background: rgba(236, 129, 81, .3);
        padding: 4px 8px;
        border-radius: 2px;
    }
	.gradient-color{
  background: -webkit-gradient(linear,0 0,0 bottom,from(#fcfcfc),to(#ececec))
}
.tablebo{
	border: 1px solid #ccc;
	border-bottom: none	;
}
</style>

<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/contratchange/scripts/bill_change.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/contratchange/scripts/contractFlowDetail.js" type="text/javascript" charset="utf-8"></script>
